<form onsubmit="return false;" class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
    <div class="layui-card-body" style="padding-left:40px">

        <fieldset>
            <legend>选择地址</legend>


            <div id="citiesBox" class="layui-form-item">
                <div class="layui-input-inline margin-bottom-10">
                    <select class="layui-select" name="check_province" data-level="1" lay-filter="cities">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline margin-bottom-10">
                    <select class="layui-select" name="check_province" data-level="2" lay-filter="cities">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline margin-bottom-10">
                    <select class="layui-select" name="check_province" data-level="3" lay-filter="cities">
                        <option value="">请选择区域</option>
                    </select>
                </div>
            </div>
        </fieldset>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="layui-form-item text-center">
        <!--{notempty name='vo.id'}-->
        <input type='hidden' value='{$vo.id}' name='id'>
        <!--{/notempty}-->
        <!--{notempty name='vo.mid'}-->
        <input type='hidden' value='{$vo.mid}' name='mid'>
        <!--{/notempty}-->
        <!--{notempty name='vo.contact_name'}-->
        <input type='hidden' value='{$vo.contact_name}' name='contact_name'>
        <!--{/notempty}-->
        <!--{notempty name='vo.contact_phone'}-->
        <input type='hidden' value='{$vo.contact_phone}' name='contact_phone'>
        <!--{/notempty}-->
        <input type='hidden' value='' name='city_id' id="cityId">
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消吗？" data-close>取消编辑</button>
    </div>
    <script>
        window.form.render();
        window.form.on('select(cities)',function (data) {
            let level = data.elem.getAttribute('data-level') || '1';
            let value = data.value;
            if(value.length === 0)
            {
                removeSurplus(3);
                return
            }
            document.getElementById("cityId").value = value;
            ajax2cities("{:url('api/v1/address','','')}/" + value,level);
        });
        function ajax2cities(url, level = 0) {
            level++;
            var xmlhttp;
            if(window.XMLHttpRequest)
            {
                xmlhttp = new XMLHttpRequest();
            }
            else
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function()
            {
                if (xmlhttp.readyState===4 && xmlhttp.status===200)
                {
                    //请求成功
                    let response = JSON.parse(xmlhttp.responseText);
                    if(response && response.code === 1)
                    {
                        let removeLevel = level - 1;
                        removeSurplus(removeLevel);

                        let cities = response.data;
                        if(cities.length === 0)
                        {
                            //如果返回数据为空
                            return
                        }

                        if(level < 4)
                        {
                            let level_dom = document.querySelector("select[data-level='"+level+"']");
                            for(let i = 0; i < cities.length; i++)
                            {
                                let option = document.createElement("option");
                                option.value = cities[i].id;
                                option.innerText = cities[i].name;
                                level_dom.appendChild(option)
                            }
                        } else {
                            let citiesBox = document.getElementById("citiesBox");
                            let div = document.createElement("div");
                            div.setAttribute('class','layui-input-inline margin-bottom-10');
                            let select = document.createElement("select");
                            select.setAttribute('data-level',level);
                            select.setAttribute('lay-filter','cities');
                            select.setAttribute('class','layui-select');
                            select.setAttribute('name','check_province');
                            let optionNull = document.createElement("option");
                            optionNull.value = "";
                            optionNull.innerText = '请选择';
                            select.appendChild(optionNull);
                            for(let i = 0; i < cities.length; i++)
                            {
                                let option = document.createElement("option");
                                option.value = cities[i].id;
                                option.innerText = cities[i].name;
                                select.appendChild(option)
                            }
                            div.appendChild(select);
                            citiesBox.appendChild(div);

                        }
                        window.form.render();
                    }
                }
            };
            xmlhttp.open("GET",url,true);
            xmlhttp.send();
        }

        /**
         * 按级别充值选择框
         * @param level
         */
        function removeSurplus(level) {
            let selectAll = document.getElementsByName('check_province');
            for (let j = 0; j < selectAll.length; j++) {
                // 遍历元素
                let selectLevel = selectAll[j].getAttribute('data-level') || '';
                if(selectLevel > level)
                {
                    if(selectLevel > 3)
                    {
                        let parentNode = selectAll[j].parentNode;
                        parentNode.remove();
                    } else {
                        selectAll[j].innerHTML = "";
                        let optionNull = document.createElement("option");
                        optionNull.value = "";
                        let optionNullText = '';
                        switch(selectLevel) {
                            case "1":
                                optionNullText = '请选择省';
                                break;
                            case "2":
                                optionNullText = '请选择市';
                                break;
                            case "3":
                                optionNullText = '请选择区域';
                                break;
                            default:
                                optionNullText = '请选择';
                        }
                        optionNull.innerText = optionNullText;
                        selectAll[j].appendChild(optionNull);
                    }

                }
            }
        }
        (function () {
            ajax2cities("{:url('api/v1/address','','')}/1");
        })();
    </script>
</form>
